<nz-breadcrumb>
  <nz-breadcrumb-item>首页</nz-breadcrumb-item>
  <nz-breadcrumb-item>已选课程</nz-breadcrumb-item>
</nz-breadcrumb>

<div>
  <button
    nz-button
    nzType="primary"
    (click)="cancelCourses()"
    [disabled]="takeSourseButtonDisabled || !listOfSelectedCourses.length"
  >
    退选勾选的课程
  </button>
</div>

<nz-table
  #formOfSelectedCourse
  [nzData]="listOfSelectedCourses"
  (nzCurrentPageDataChange)="currentPageDataChange($event)"
>
  <thead>
    <tr>
      <th
        nzShowCheckbox
        [(nzChecked)]="isAllDisplayDataChecked"
        [nzIndeterminate]="isIndeterminate"
        (nzCheckedChange)="checkAll($event)"
      ></th>
      <th>课程名称</th>
      <th>课程号</th>
      <th>上课时间</th>
      <th>开课教师</th>
    </tr>
  </thead>

  <tbody>
    <tr *ngFor="let course of formOfSelectedCourse.data">
      <td
        nzShowCheckbox
        [(nzChecked)]="mapOfCheckedId[course.no]"
        (nzCheckedChange)="refreshStatus()"
      ></td>
      <td>{{ course.name }}</td>
      <td>{{ course.no }}</td>
      <td>{{ course.time }}</td>
      <td>{{ course.teacher }}</td>
    </tr>
  </tbody>
</nz-table>
